<template>
  <div class="app-container">
    <div v-if="productShowList">
      <el-button type="primary" @click="handleAddProduct">{{ $t('product.productAddBtn') }}</el-button>
      <el-row class="searchWarp">
        <el-col :span="6">
          {{ $t('product.productName') }}
          <el-input v-model="searchParams.name" class="el-input" />
        </el-col>
        <el-col :span="6">
          {{ $t('product.productSort') }}
          <el-select v-model="searchParams.chooseSort" clearable class="el-input" placeholder="请选择">
            <el-option
              v-for="item in sort"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <!-- <el-col :span="6">
          {{ $t('product.productGroup') }}
          <el-select v-model="searchParams.chooseGroup" clearable class="el-input" placeholder="请选择">
            <el-option
              v-for="item in group"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col> -->
        <el-col :span="4">
          <el-button :loading="searchLoading" type="primary" plain @click="handleSearch">搜索</el-button>
        </el-col>
      </el-row>
      <tab
        v-loading="tabLoading"
        :tab-map-options="tabMapOptions"
        :table-label="tableLabel"
        :table-data="resultListData"
        :list-query="listQuery"
        @getHandleProductEditor="handleEditorProduct"
        @handleListChangeStatus="handleChangeProductStatus"
        @handleListDel="handleProductDel"
        @handleTabChange="handleTabClick"
        @dataEditor="handleProductUpdate"
        @RefreshListWay="getProductList"
      />
    </div>
    <div v-else>
      <add-product :product-status="productStatus" :datas="dataQuery" :types="getType" @emitReturn="handleReturnList" @getListWay="getProductList" />
    </div>
  </div>
</template>

<script>
import tab from '@/views/tab/index'
import AddProduct from '@/components/addProduct/index'
import { productList, catalogList, groupList, productBaseInfoEditor, getProductDetail, deleteProduct, changeProductStatus } from '@/api/product'
export default {
  name: 'ProductList',
  components: {
    tab,
    AddProduct
  },
  data() {
    var self = this
    return {
      sort: [],
      group: [],
      chooseSort: '',
      // chooseGroup: '',
      searchParams: {
        name: '',
        chooseSort: '',
        chooseGroup: ''
      },
      productShowList: true,
      searchLoading: false,
      tabMapOptions: [
        {
          label: this.$t('product.tabTitleAll'),
          key: 'All'
        },
        {
          label: this.$t('product.tabTitleProductUp'),
          key: 'SALED'
        },
        {
          label: this.$t('product.tabTitleProductDown'),
          key: 'UNSALED'
        },
        {
          label: this.$t('product.tabTitleDrafts'),
          key: 'DRAFT'
        },
        {
          label: this.$t('product.tabTitleDelete'),
          key: 'RECYCLED'
        }
      ],
      tableData: [
        {
          id: 1,
          imgSrc: 666,
          name: '商品名称',
          sort: '分类',
          price: 88,
          status: 'down',
          serialNumber: '1',
          time: '8:00'
        },
        {
          id: 2,
          imgSrc: 666,
          name: '商品名称',
          sort: '分类',
          price: 88,
          status: 'up',
          serialNumber: '1',
          oprateTime: '8:00'
        }
      ],
      tableLabel: [
        {
          label: self.$t('product.productTableTitlePic'),
          key: 'imgSrc',
          isEditor: false
        },
        {
          label: self.$t('product.productTableTitleName'),
          key: 'name',
          isEditor: true
        },
        {
          label: self.$t('product.productSort'),
          key: 'sort',
          isEditor: false
        },
        {
          label: self.$t('product.productTableTitlePrice'),
          key: 'price',
          isEditor: true
        },
        {
          label: self.$t('product.productTableTitleStatus'),
          key: 'productStatus',
          isEditor: false
        },
        {
          label: self.$t('product.productTableTitleNum'),
          key: 'serialNumber',
          isEditor: true
        },
        {
          label: self.$t('product.productTableTitleTime'),
          key: 'oprateTime',
          isEditor: false
        },
        {
          label: self.$t('product.productTableTitleOpration'),
          key: 'opration',
          type: 'product'
        }
      ],
      listData: [],
      resultListData: [],
      status: 'All',
      tabLoading: false,
      listQuery: {
        limit: 20,
        page: 1,
        total: 0
      },
      dataQuery: {},
      productStatus: ''
    }
  },
  mounted() {
    this.getGroupList()
    this.getCatalogList()
    this.getProductList()
  },

  methods: {
    // 获取商品列表
    getProductList() {
      var self = this
      this.productShowList = true
      this.tabLoading = true
      var obj = {
        catalogId: this.searchParams.chooseSort,
        pageNo: this.listQuery.page - 1,
        pageSize: this.listQuery.limit,
        productGroupId: this.searchParams.chooseGroup,
        status: this.status === 'All' ? this.status = '' : this.status,
        title: this.searchParams.name
      }
      productList(obj).then(res => {
        console.log('获取商品列表', res)
        self.listData = res.data.contents
        self.listQuery.total = res.data.total

        self.transFormWords()
        self.tabLoading = false
        self.searchLoading = false
      }).catch(error => {
        console.log(error)
        self.tabLoading = false
        self.searchLoading = false
      })
    },
    // 商品列表字段转换
    transFormWords() {
      var self = this
      var data = JSON.parse(JSON.stringify(self.listData))
      var array = []
      data.forEach(item => {
        var obj = {}
        obj.id = item.id
        obj.imgSrc = item.contentImage[0] // 商品封面图
        obj.name = item.title// 商品名称
        obj.sort = item.catalogInfo ? item.catalogInfo.title : '' // 商品分类
        obj.price = item.price // 商品价格
        var productStatusValue = ''
        // :DRAFT-草稿箱 SALED-商家 UNSALED-下架 RECYCLED-回收站
        if (item.status === 'DRAFT') {
          productStatusValue = '草稿'
        } else if (item.status === 'UNSALED') {
          productStatusValue = '已下架'
        } else if (item.status === 'SALED') {
          productStatusValue = '已上架'
        } else if (item.status === 'RECYCLED') {
          productStatusValue = '回收站'
        }
        obj.statusValue = item.status
        obj.productStatus = productStatusValue // 商品状态
        obj.serialNumber = item.sort // 商品序号
        obj.oprateTime = item.createTime // 操作时间
        obj.params = item
        array.push(obj)
      })
      this.resultListData = array
      // this.$refs.child.reload()
      // this.resultListData.splice(this.resultListData.length)
      // this.$set(this.resultListData, '', this.resultListData)
      console.log('怎么回事', this.resultListData)
    },
    // 商品 列表内 编辑
    handleProductUpdate(data) {
      var self = this
      this.tabLoading = true
      const queryObj = {
        id: data.id,
        title: data.name,
        price: data.price,
        sort: data.serialNumber
      }
      productBaseInfoEditor(queryObj).then(res => {
        console.log('修改返回===》', res)
        self.getProductList()
      })
    },
    // 获取分类列表
    getCatalogList() {
      var self = this
      var param = {
        code: '',
        enable: '',
        pageNo: 0,
        pageSize: 200,
        title: '',
        type: ''
      }
      catalogList(param).then(res => {
        console.log(res)
        var data = []
        res.data.contents.forEach(item => {
          var obj = {
            label: item.title,
            value: item.id
          }
          data.push(obj)
        })
        self.sort = data
      }).catch(error => {
        console.log(error)
      })
    },
    // 分组列表
    getGroupList() {
      var self = this
      var param = {
        pageNo: 0,
        pageSize: 200,
        groupName: ''
      }
      var data = []
      groupList(param).then(res => {
        res.data.contents.forEach(item => {
          var obj = {
            label: item.groupName,
            value: item.id
          }
          data.push(obj)
        })
        self.group = data
      }).catch(error => {
        console.log(error)
      })
    },
    // 切换状态
    handleTabClick(item) {
      console.log('舒心')
      if (item === 'All') {
        this.status = ''
      }
      this.status = item
      this.getProductList()
    },
    // 搜索
    handleSearch() {
      // var self = this
      this.searchLoading = true
      this.getProductList()
    },
    // 编辑
    handleEditorProduct(data) {
      var self = this
      console.log(data)
      self.tabLoading = true
      this.productStatus = data.params.status
      getProductDetail(data.id).then(res => {
        self.dataQuery = res.data
        self.productShowList = false
        self.tabLoading = false
        self.getType = 'editor'
      }).catch(error => {
        console.log(error)
        self.tabLoading = false
      })
    },
    // 商品上/下架和草稿箱
    handleChangeProductStatus(data) {
      var self = this
      this.tabLoading = true
      var queryDataStatus = ''
      if (data.params.status === 'SALED') {
        queryDataStatus = 'UNSALED'
      }
      if (data.params.status === 'UNSALED' || data.params.status === 'DRAFT') {
        queryDataStatus = 'SALED'
      }
      if (data.params.status === 'RECYCLED') {
        queryDataStatus = 'DRAFT'
      }
      data.params.status
      var obj = {
        id: data.params.id,
        status: queryDataStatus
      }
      changeProductStatus(obj).then(res => {
        console.log(res)
        self.getProductList()
      }).catch(err => {
        console.log(err)
        self.tabLoading = false
      })
    },
    // 商品删除
    handleProductDel(data) {
      var self = this
      if (data.params.status === 'RECYCLED') {
        // 彻底删除
        this.$confirm('此次操作将永久删除数据，确认删除？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteProduct(data.id).then(res => {
            self.getProductList()
          }).catch(err => {
            console.log(err)
          })
        }).catch(() => {
          console.log('cancel')
        })
      } else {
        this.$confirm('删除以后可在回收站查看，确认删除？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var obj = {
            id: data.params.id,
            status: 'RECYCLED'
          }
          changeProductStatus(obj).then(res => {
            console.log(res)
            self.getProductList()
          }).catch(err => {
            console.log(err)
          })
        // 彻底删除
        // deleteProduct(data.id).then(res => {
        //   self.getProductList()
        // }).catch(err => {
        //   console.log(err)
        // })
        }).catch(() => {
          console.log('cancel')
        })
      }
    },
    handleReturnList() {
      this.productShowList = true
      this.status = 'All'
      this.getProductList()
    },
    // 添加商品
    handleAddProduct() {
      this.productShowList = false
      this.getType = 'add'
      this.productStatus = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.searchWarp{
  margin-top: 20px;
  margin-bottom: 20px;
  .el-input {
    width: 70%;
    display: inline-block;
    margin-left: 10px;
  }
}

</style>
